import { useEffect, useState } from 'react';
import { class_esy, isArray, isEmpty } from 'esy-ui';
import { useGlobalStore } from '@/mobx';
import { postNoticeList } from '@/services';
import { Empty, Header, Img } from '@/components';
import suonaPng from '@/assets/images/common/suona.png';

function Infomation() {
  const [list, setList] = useState([]);
  const { changeState } = useGlobalStore();
  const [openKey, setOpenKey] = useState(null);

  useEffect(() => {
    changeState('isLoading', true);
    postNoticeList({})
      .then((res: any) => {
        setList(res?.Data);
      })
      .catch(() => {})
      .finally(() => {
        changeState('isLoading', false);
      });
  }, [changeState]);

  console.info();

  return (
    <div className='bg-body w-full h-full flex flex-col'>
      <Header title='text_38' />
      <div className='py-3 px-4 flex-1 overflow-y-auto'>
        {isArray(list) && !isEmpty(list) ? (
          list.map((it) => (
            <div
              key={it.Id}
              className='bg-white rounded-xl mb-4 py-2.5 px-3 gap-2 overflow-hidden'
              onClick={() => {
                if (it.Id === openKey) {
                  setOpenKey(null);
                } else {
                  setOpenKey(it.Id);
                }
              }}
            >
              <div className='flex items-center justify-between '>
                <Img boxClassName='w-6 h-6' src={suonaPng} />
                <div className='flex-1 ml-2'>
                  <div className='text-base truncate flex-1'>{it.Title}</div>
                  <div className='text-bar text-xs'>{it.InsertTime}</div>
                </div>
              </div>
              <div
                className={class_esy([
                  'text-desc text-sm transition-max-height duration-150 overflow-y-auto leading-6 mt-2 pt-2 border-t border-solid',
                  openKey === it.Id ? 'max-h-96' : 'max-h-10 truncate',
                ])}
              >
                {it.Content}
              </div>
            </div>
          ))
        ) : (
          <Empty />
        )}
      </div>
    </div>
  );
}

export default Infomation;
